import React from 'react';
import { AsyncStorage } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import { Image } from 'react-native';

import BaseStyle from './constants/Style';

import HomeScreen from './pages/home';
import MineScreen from './pages/mine';

const getIcon = type => {
  switch (type) {
    case 'Home':
      return require('./images/home/home.png');
    case 'Home-focused':
      return require('./images/home/home_1.png');
    case 'Mine':
      return require('./images/home/mine.png');
    case 'Mine-focused':
      return require('./images/home/mine_1.png');
  }
};

export default createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        title: '首页',
      }),
    },
    Mine: {
      screen: MineScreen,
      navigationOptions: () => ({
        title: '我的',
        tabBarOnPress: async obj => {
          const { navigation, defaultHandler } = obj;
          //在这里控制登录跳转
          const userData = await AsyncStorage.multiGet(['token', 'userId']);
          if (userData[0][1] && userData[1][1]) {
            //登录状态下
            defaultHandler();
          } else {
            global.token = '';
            global.userId = '';
            navigation.navigate('LoginScreen');
          }
        },
      }),
    },
  },
  {
    initialRouteName: 'Home',

    /* eslint-disable */
    // 这里暂时不做代码风格校验 后面按需剥离出来
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ tintColor, focused }) => {
        const { routeName } = navigation.state;
        let iconName

        if (routeName === 'Home') {
          iconName = focused ? getIcon(`${routeName}-focused`) : getIcon(routeName);
        } else if (routeName === 'Mine') {
          iconName = focused ? getIcon(`${routeName}-focused`) : getIcon(routeName);
        }

        return (
          <Image
            source={iconName}
            style={{ width: 20, height: 20 }}
          />
        );
      },

    }),
    /* eslint-disable */

    tabBarOptions: {
      activeTintColor: BaseStyle.primaryColor.color,  // 文字和图片选中颜色
      // inactiveTintColor: '#999999', // 文字和图片未选中颜色
      // showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
      // indicatorStyle: {
      //   height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
      // },
      style: { //整个tab样式设置
        backgroundColor: '#fff',
        borderTopWidth: 0,
        height: 49
      },
      labelStyle: {
        fontSize: 14,
      },
    },


  },
);
